<template>
  <div style="height:auto;">
    <iframe src="http://diff.pangubpm.com/" id="iframe" scrolling="yes" frameborder="0"
            style="width:100%;height: 100%;min-height: 700px" :height="tableHeight"></iframe>

  </div>


</template>

<script>
//  ipLog,
  import {getBpmnModelCategory, getModelerJson, getTaskChartData, publishModel} from "@/api/analy";
  // import Footer from '../../../common/footer';

  export default {
    name: 'Task',
    // components: {
    //   Footer
    // },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        modelerModal: false,
        viewImageModeler: false,
        chartData: {},
        baseURL: process.env.VUE_APP_BASE_BPM_API,
        modelerSrc: process.env.VUE_APP_BASE_BPM_API + "diagram/index.html",
        viewImageModelerSrc: process.env.VUE_APP_BASE_BPM_API + "view/def.html?&modelId=",
        viewImageModelerTmpSrc: "",
        shopName: [],
        statusList: [
          {label: "未发布", value: "0"},
          {label: "已发布", value: "1"},
        ],
        queryForm: {
          name: "",
          createTime: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          status: '',
          whereSql: "",
          type: 5,
          typeKey: ""
        },
        categoryData: []
      }
    },
    mount() {


    },
    created() {
      this.getData()
      var threshold = 160;
      var count = 1;
    },
    methods: {
      changeMobsfIframe: function () {
        const iframe = document.getElementById('iframe');
        const deviceHeight = document.body.clientHeight;
        iframe.style.height = (Number(deviceHeight) - 86) + 'px';
      },
      locationUrl: function (id) {
        if (id) {
          var url = this.baseURL + "diagram/index.html";
          url = url + '?id=' + id + "&t=" + new Date().getTime();
          this.modelerSrc = url
        }
        this.modelerModal = true;

      },
      cancelModel: function () {
        this.getModelerJsonAction();
      },
      viewImage: function (id) {
        if (id) {
          var url = this.baseURL + "view/def.html?&modelId=" + id
          this.viewImageModelerTmpSrc = url;

        }
        this.viewImageModeler = true;

      },
      versionManager: function (id, modelKey) {

        this.$router.push({name: 'versionManager', query: {t: new Date().getTime(), "modelKey": modelKey}})
      },
      openModelDialog: function () {
        var url = this.baseURL;
        url = url + "diagram/index.html" + "?t=" + new Date().getTime();
        this.modelerSrc = url
        this.modelerModal = true;
      },
      openModelDiffDialog: function () {
        this.modelerSrc = "http://diff.pangubpm.com/"
        this.modelerModal = true;
      },
      publishModel: function (id) {
        publishModel(id).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": 800, message: '发布成功', type: 'success', customClass: 'zZindex'});

            this.getModelerJsonAction();
          } else {
            this.$message({"duration": 800, message: response.msg, type: 'warning', customClass: 'zZindex'});

          }

        })
      },
      queryFormCreateTime: function (e) {
        this.queryForm.createTime = e;
      },
      refreshTask: function (data) {
        if (data[0].parentId == '-1') {
          this.queryForm.typeKey = ""
          this.queryForm.type = 5
        } else {
          this.queryForm.typeKey = data[0].id;
          this.queryForm.type = 1

        }
        this.queryForm.createTime = ""
        this.queryDate = [];
        this.queryForm.whereSql = "";
        this.queryForm.page = 1
        this.getModelerJsonAction()
        this.queryForm.type = 5


      },
      queryMethod: function () {
        var name = this.queryForm.name;
        var whereSql = '';
        var createTime = this.queryForm.createTime;
        if (createTime) {
          if (createTime[0]) {
            whereSql = "  CREATE_TIME_  between '" + createTime[0] + "' and " + "'" + createTime[1] + "'";
          }

        }
        this.queryForm.whereSql = whereSql;
        getModelerJson(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })

      },
      getModelerJsonAction: function () {
        getModelerJson(this.queryForm).then((response) => {

          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        this.getModelerJsonAction();

      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getModelerJsonAction()
      },
      handleClick(val) {
        getTaskChartData({"seller_id": val}).then((response) => {
          this.chartData = response.data
          this.sellerId = val
          this.shopName = response.data.shopName
          this.chartVisible = true
        })
      },
      search() {
        this.queryForm.page = 1
        this.queryForm.type = 2
        this.queryForm.typeKey = ""
        this.queryMethod()
        this.queryForm.type = 5
      },
      reset() {
        this.queryForm.typeKey = ""
        this.queryForm.status = ""
        this.queryForm.type = 5
        this.queryForm.name = ""
        this.queryForm.modelKey = ""
        this.getData();
      }

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

</style>
